<template>
  <div id="app">
    <h2>我是App组件</h2>
    <p>当前数量:{{$store.state.count}}</p>
    
    <!-- 测试getters  -->
    <h2>测试getters</h2>
    <p>count的平方:{{$store.getters.powerCounter}}</p>
    <p>获取年龄大于20的学生:{{$store.getters.get20Age}}</p>
    <table style="border:1px solid black;">
      <thead>
        <tr>
          <th>name</th>
          <th>id</th>
          <th>age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="stu in $store.getters.get20Age" :key="stu.id">
          <td>{{stu.id}}</td>
          <td>{{stu.name}}</td>
          <td>{{stu.age}}</td>
        </tr>
      </tbody>
    </table>
    <p>年龄大于20的个数:{{$store.getters.ageLength}}</p>
    <p>返回年龄大于自定义参数的学生:{{$store.getters.moreAgeStu(19)}}</p>
    
    <!-- 加减操作:通过mutations实现数据更新 -->
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementCount(5)">+5</button>
    <button @click="incrementCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>
    <button @click="outTimeCount">延迟2秒加一</button>
    <!-- HelloVuex组件 -->
    <hello-vuex></hello-vuex>

    <h2>测试modules代码</h2>
    <div>
      <h3>{{$store.state.moduleA.name}}</h3>
      <h3>{{$store.getters.updateName}}</h3>
      <button @click="asyncUpdateName">异步修改名字</button>
    </div>
    <!-- 
      vue的响应式的方法:
        vuex的初始化属性是会自动添加到vue响应式系统中的,但是如果我们后面手动的添加进去的属性,如果不用响应式的操作,会导致数据改变了,但是界面不会变
        Vue.set(数组/对象,下标/key,值);
        Vue.delete(数组/对象,下标/key);
     -->
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex';
import {DECREMENT,INCREMENT} from './store/mutations-types';

export default {
  name: 'App',
  components: {
    HelloVuex
  },
  data() {
    return {

    }
  },
  methods: {
    increment(){
      this.$store.commit(INCREMENT);
    },
    decrement(){
      this.$store.commit(DECREMENT);
    },
    incrementCount(num){
      this.$store.commit('incrementCount',num);
    },
    addStudent(){
      let stu = {id:115,name:'陈建亮',age:25}
      this.$store.commit('addStudent',stu);
    },
    outTimeCount(){
      //this.$store.dispatch('outTimeCount');
      this.$store.dispatch('outTimeCount').then(msg=>{
        console.log(msg);
      });
    },
    asyncUpdateName(){
      this.$store.dispatch('asyncUpdateName','lisi');
    }
  },
}
</script>

<style>

</style>
